
<!--
 * @Author: cgl
 * @Date: 2023-04-18 15:12:26
 * @LastEditors: cgl
 * @LastEditTime: 2023-09-05 14:16:12
 * @FilePath: \public-health-emergencies-fed:\新放射\新radiation-hygiene-fe\src\views\slide\task.vue
 * @Description:
 *
 * Copyright (c) 2023 by cgl/微盛信息产业有限公司, All Rights Reserved.
-->
<template>
  <el-dialog
		class="app-container"
		title="历史记录"
    :visible.sync="dialogVisible"
		v-dialogDrag="true"
    width="60%"
    @close="closeDialog"
	>
		<el-table
			ref="sendRefs"
			height="500"
			style="margin-bottom: 60px;"
			v-loading="loading"
			:data="historyList"
		>
			<el-table-column label="操作人" align="center" prop="recordOssNickName"/>
			<el-table-column label="操作文件" align="center" :show-overflow-tooltip="true">
        <template slot-scope="{ row }">
          <span style="color: #2A72EE; cursor: pointer;" @click="handleOpenFile(row)">查看文件</span>
        </template>
      </el-table-column>
      <el-table-column label="操作时间" align="center">
        <template slot-scope="{ row }">
          {{ parseTime(row.recordOssDate, '{y}-{m}-{d}') }}
        </template>
      </el-table-column>
		</el-table>

    <el-dialog
      class="app-container"
      title="历史记录对比"
      :visible.sync="comparisonVisible"
      append-to-body
      v-dialogDrag="true"
      width="90%"
    >
      <el-row type="flex" :gutter="10">
        <el-col :span="12">
          <p style="text-align: center;font-weight: bold;">原始</p>
          <!-- <canvas id="iframe1" width="100%" height="600px"></canvas> -->
          <iframe id="iframe1" :src="primitiveUrl" width="100%" height="600px" frameborder="0"></iframe>
        </el-col>
        <el-col :span="12">
          <p style="text-align: center;font-weight: bold;">修改后</p>
          <iframe id="iframe2" :src="comparisonUrl" width="100%" height="600px" frameborder="0"></iframe>
        </el-col>
      </el-row>
    </el-dialog>
	</el-dialog>
</template>

<script>
// 引入PDF.js库
// import PDFJS from 'pdfjs-dist'
const PDFJS = require('pdfjs-dist/webpack');
// 引入深度比较函数（假设有一个实现了deepEqual的库）
import deepEqual from 'deep-equal';
// const deepEqual = require('deep-equal');
import { listOss, listByIds, delOss } from "@/api/system/oss";
export default {
  name: "HistoryRecord",
  data() {
    return {
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        participantUndertakeTypes: []
      },
      selected: [],
			total: 0,
			dialogVisible: false,
      comparisonVisible: false,

      participantLists: [],
      loading: false,
      primitiveUrl: '', // 当前报告
      comparisonUrl: '', // 比对报告
      historyList: [],
      pdfDoc: null,
    };
  },
  created() {
  },
  methods: {
		openDialog(row) {
			this.dialogVisible = true
      // recordHistoryList 外照射任务   detectionEquipmentRecordList  设备任务
      this.historyList = row?.recordHistoryList || row?.detectionEquipmentRecordList || []
      let recordOssId = row?.recordOssId || (row.isCbct == 0 ? row.ossId : row.cbctOssId)
      recordOssId && listByIds(recordOssId).then((response) => {
        this.primitiveUrl = response?.data[0].url || ''
      });
		},
    async handleOpenFile(row) {
      let {code, data} = await listByIds(row.recordOssId)
      let url = data[0].url
      this.comparisonUrl= url
      this.comparisonVisible = true
      // this.loadFile(this.primitiveUrl, 'iframe1')
      // this.listenEvent()
      // code == 200 && window.open(url, '', 'pdf')
      // this.comparePdfFiles(this.primitiveUrl, url).then(isEqual => {
      //   console.log('PDF files are equal:', isEqual);
      // });
    },
    async loadFile(url, idStr) {
      this.pdfDoc = await PDFJS.getDocument(url).promise
      console.log(this.pdfDoc);
      this.renderPage(1, idStr)
    },
    async renderPage(num, idStr) {
      let page = await this.pdfDoc.getPage(num)
      console.log(page);
      const canvas = document.getElementById(idStr)
      const ctx = canvas.getContext('2d')
      const viewport = page.getViewport({ scale: 1 })
      canvas.width = viewport.width
      canvas.height = viewport.height
      const renderContext = {
          canvasContext: ctx,
          viewport
      }
      page.render(renderContext)
    },
    closeDialog() {
      this.resetForm('queryParams')
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
        participantUndertakeTypes: []
      }
    },
    closeAdd() {
      this.resetForm('addParticipantRefs')
    },
  }
};
</script>

<style lang="scss" scoped>
::v-deep .handletabel.el-table {
	margin-bottom: 60px;
	overflow: auto;
	.el-table__body-wrapper {
    overflow-y: auto;
    overflow-x: hidden;
	}
}
</style>
